<template>
  <div>
    <vue-pdf-embed  class="resume-viewer"
      v-if="pdfUrl" 
      :source="pdfUrl" 
      :key="pdfUrl" 
       @rendered="handlePdfRendered"
    @error="handlePdfError"
    />
    <!-- <div class="iframe-container">
    <iframe 
      v-if="pdfUrl"
      :src="pdfUrl"
      type="application/pdf"
      width="100%"
      height="100%"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div> -->
    <!-- <iframe v-if="pdfUrl" :src="pdfUrl" width="100%" height="800px" /> -->
  </div>
</template>

<script setup>
import { ref, getCurrentInstance ,onBeforeUnmount} from 'vue';
import VuePdfEmbed from "vue-pdf-embed";

const { proxy } = getCurrentInstance();
const props = defineProps({
  articleId: String
});
onBeforeUnmount(() => {
  if (pdfUrl.value) {
    URL.revokeObjectURL(pdfUrl.value);
  }
});
const pdfUrl = ref(null);

// 获取 PDF 文件
const loadPdf = async () => {
  try {
    const response = await proxy.$axios.get('/api/resume/pdf', {
      responseType: 'arraybuffer',
      headers: { 'Cache-Control': 'no-cache' }
    });

    // 验证数据完整性
    if (!(response.data instanceof ArrayBuffer) || response.data.byteLength === 0) {
      throw new Error('文件数据无效');
    }

    // 释放旧 URL（关键！）
    if (pdfUrl.value) {
      URL.revokeObjectURL(pdfUrl.value);
    }

    // 生成新 Blob 并赋值给 pdfUrl
    const blob = new Blob([response.data], { type: 'application/pdf' });
    pdfUrl.value = URL.createObjectURL(blob); // 直接绑定到 iframe 的 src


  } catch (error) {
    console.error('加载失败:', error);
  }
};
const handlePdfRendered = () => {
  console.log("PDF 渲染成功");
};

const handlePdfError = (error) => {
  console.error("PDF 渲染失败:", error);
};
// 初始化时加载
loadPdf();
</script>

<style>
.resume-viewer {
  /* 动态适配 Header 高度（普通状态50px + 滚动状态补偿） */
  margin-top: calc(62px + 2vh); 
  min-height: calc(100vh - 62px);
  width: 100%;
}

@media (max-width: 768px) {
  .resume-viewer {
    margin-top: 54px;  /* 移动端 Header 高度补偿 */
  }
}
@import 'vue-pdf-embed/dist/styles/annotationLayer.css';
/* 正确路径 */
</style>